<template>
  <div class="all">
    <div class="left">
      <div style="text-align:center; font-size: 20px;font-weight: 800;border: 1px solid #333;background-color: #184370;color: skyblue;">疫情数据中心</div>
      <div id="echarts"></div>
      <div style="width: 300px;height:220px;overflow-x: hidden;">
        <div style="height:25px;text-align:center;font-weight: 800;border: 1px solid #333;background-color: #184370;color: skyblue;">地区疫情排行</div>
        <el-table :data="tableData2" style="width:100%" row-key="id" border
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="province" label="地区" sortable width="70" >
            </el-table-column>
            <el-table-column prop="sup" label="确诊" sortable width="70">
            </el-table-column>
            <el-table-column prop="cure" label="治愈" sortable width="70">
            </el-table-column>
            <el-table-column prop="dead" label="死亡" sortable width="70">
            </el-table-column>
        </el-table>
      </div>
      <div>
        <div class="get">患者特征汇总</div>
      </div>
    </div>
    <div class="mid">
      <div class="title">
        <div style="float:left;">
          <el-button @click="nowTag" style="height:30px">现有确诊</el-button>
          <el-button @click="allTag" style="height:30px">累计确诊</el-button>
        </div>
        <div class="title_head">疫情总览</div>
      </div>
      <div class="content"><div class="contain"><Map :tag_1="tag"></Map></div></div>
      <div class="history">
        <div class="history_title">疫情情况</div>
        <div id="history_echarts">
            <el-table :data="tableData3" style="width:100%">
            <el-table-column prop="ontime" label="截止时间"  width="150" >
            </el-table-column>
            <el-table-column prop="all" label="确诊人数"  width="110">
            </el-table-column>
            <el-table-column prop="cure" label="治愈"  width="80">
            </el-table-column>
            <el-table-column prop="dead" label="死亡"  width="80">
            </el-table-column>
            <el-table-column prop="sus" label="疑似人数"  width="110">
            </el-table-column>
            <el-table-column prop="out" label="境外输入人数"  width="110">
            </el-table-column>
        </el-table>
        </div>
      </div>
    </div>
    <div class="right">
      <div style="text-align: center;font-size: 20px;font-weight: 800;border:1px solid #333;background-color: #184370;color: skyblue;">
        <span>实时播报</span>
      </div>
      <div class="talk">
        <div style="margin-button: 10px" v-for="item in article1.list" :key="item.id">
          <div class="logo">
            <div style="width: 18px; height: 30px; float: left">
              <div>发布时间:</div>
            </div>
            <div style="width: 280px;float: right;text-align: center;">
              发布时间:{{ item.publishTime | dateFMT }}
            </div>
          </div>
          <div style="width: 300px; height: 100px; text-align: center">
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from "vuex";
import Map from "../../components/mapuseinning";
import mapData from '../../assets/data.json'
var Data3=mapData.data;
export default {
  data() {
    //0的时候是现有确诊,1的时候是累计确诊
    return {
      children:true,
      tag: 0,
      timer: null,
      mapData,
      obj: {
        page: 1,
        pageSize: 1000,
      },
       tableData2: [
          {
            id: 1,
            province: "湖北",
            sup: "68149",
            cure: "63637",
            dead: "4512",
            children: [
              {
                id: 11,
                province: "武汉市",
                sup: "50340",
                cure: "46471",
                dead: "3869",
              },
              {
                id: 12,
                province: "孝感市",
                sup: "3518",
                cure: "3389",
                dead: "129",
              },
              {
                id: 13,
                province: "黄冈市",
                sup: "2907",
                cure: "2782",
                dead: "125",
              },
              {
                id: 14,
                province: "荆州市",
                sup: "1580",
                cure: "1528",
                dead: "52",
              },
              {
                id: 15,
                province: "鄂州市",
                sup: "1394",
                cure: "1335",
                dead: "59",
              },
              {
                id: 16,
                province: "随州市",
                sup: "1307",
                cure: "1262",
                dead: "45",
              },
              {
                id: 17,
                province: "黄石市",
                sup: "1175",
                cure: "1135",
                dead: "39",
              },
                {
                id: 18,
                province: "宜昌市",
                sup: "931",
                cure: "887",
                dead: "41",
              }
            ],
          },
          {
            id: 2,
            province: " 香港",
            sup: "9107",
            cure: "8258",
            dead: "154",
          },
          {
            id: 3,
            province: "广东",
            sup: "2065",
            cure: "2020",
            dead: "8",
            children: [
              {
                id: 31,
                province: "深圳市",
                sup: "423",
                cure: "420",
                dead: "3",
              },
              {
                id: 32,
                province: "广州市",
                sup: "377",
                cure: "376",
                dead: "1",
              },
               {
                id: 33,
                province: "东莞市",
                sup: "99",
                cure: "98",
                dead: "2",
                
              },
              {
                id: 34,
                province: "珠海市",
                sup: "98",
                cure: "97",
                dead: "1",
              },
              {
                id: 35,
                province: "佛山市",
                sup: "89",
                cure: "89",
                dead: "0",
              },
               {
                id: 36,
                province: "中山市",
                sup: "67",
                cure: "67",
                dead: "0",
              },
              {
                id: 37,
                province: "惠州",
                sup: "62",
                cure: "62",
                dead: "0",
              },
            ],
          },
          {
            id: 4,
            province: "上海",
            sup: "1551",
            cure: "1442",
            dead: "7",
          },
          {
            id: 5,
            province: "浙江",
            sup: "1306",
            cure: "1296",
            dead: "1",
            children: [
              {
                id: 51,
                province: "温州市",
                sup: "504",
                cure: "503",
                dead: "1",
                
              },
              {
                id: 52,
                province: "杭州市",
                sup: "181",
                cure: "181",
                dead: "0",
              },
              {
                id: 53,
                province: "宁波市",
                sup: "157",
                cure: "157",
                dead: "0",
                
              },
              {
                id: 54,
                province: "台州市",
                sup: "147",
                cure: "147",
                dead: "0",
              },
            ],
          },
            {
            id: 6,
            province: "河南",
            sup: "1301",
            cure: "1273",
            dead: "22",
            children: [
              {
                id: 61,
                province: "信阳市",
                sup: "274",
                cure: "272",
                dead: "2",
                
              },
              {
                id: 62,
                province: "郑州市",
                sup: "157",
                cure: "152",
                dead: "5",
              },
              {
                id: 63,
                province: "南阳市",
                sup: "156",
                cure: "153",
                dead: "3",
                
              },
              {
                id: 64,
                province: "周口市",
                sup: "76",
                cure: "75",
                dead: "1",
              },
              {
                id: 65,
                province: "漯河市",
                sup: "36",
                cure: "36",
                dead: "0",
              }
            ]
          }],
      tableData3:[{
        ontime:Data3.mtime,
        all:Data3.gntotal,
        cure:Data3.curetotal,
        dead:Data3.deathtotal,
        sus:Data3.sustotal,
        out:Data3.jwsrNum,
      }
      ]
    };
  },
  components: {
    Map,
  },
  created() {
    this.findData();
    this.page_query(this.obj);
    this.page_query_article({
      page: 1,
      pageSize: 10,
    });
  },
  computed: {
    ...mapState("dataList", ["dataList"]),
    ...mapState("article", ["article1"]),
    ...mapGetters("dataList", [
      "confirmed",
      "suspected",
      "dead",
      "cure",
      "severe",
      "outside",
    ]),
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    load(tree, treeNode, resolve) {
      this.children=true;
      setTimeout(() => {
        resolve([
              {
                id: 11,
                province: "武汉市",
                sup: "50340",
                cure: "46471",
                dead: "3869",
              },
              {
                id: 12,
                province: "孝感市",
                sup: "3518",
                cure: "3389",
                dead: "129",
              },
              {
                id: 13,
                province: "黄冈市",
                sup: "2907",
                cure: "2782",
                dead: "125",
              },
              {
                id: 14,
                province: "荆州市",
                sup: "1580",
                cure: "1528",
                dead: "52",
              },
              {
                id: 15,
                province: "鄂州市",
                sup: "1394",
                cure: "1335",
                dead: "59",
              },
              {
                id: 16,
                province: "随州市",
                sup: "1307",
                cure: "1262",
                dead: "45",
              },
              {
                id: 17,
                province: "黄石市",
                sup: "1175",
                cure: "1135",
                dead: "39",
              },
                {
                id: 18,
                province: "宜昌市",
                sup: "931",
                cure: "887",
                dead: "41",
              },
          {
                id: 31,
                province: "深圳市",
                sup: "423",
                cure: "420",
                dead: "3",
                
              },
              {
                id: 32,
                province: "广州市",
                sup: "377",
                cure: "376",
                dead: "1",
              },
               {
                id: 33,
                province: "东莞市",
                sup: "99",
                cure: "98",
                dead: "2",
                
              },
              {
                id: 34,
                province: "珠海市",
                sup: "98",
                cure: "97",
                dead: "1",
              },
              {
                id: 35,
                province: "佛山市",
                sup: "89",
                cure: "89",
                dead: "0",
              },
               {
                id: 36,
                province: "中山市",
                sup: "67",
                cure: "67",
                dead: "0",
              },
              {
                id: 37,
                province: "惠州",
                sup: "62",
                cure: "62",
                dead: "0",
              },
              {
                id: 51,
                province: "温州市",
                sup: "504",
                cure: "503",
                dead: "1",
                
              },
              {
                id: 52,
                province: "杭州市",
                sup: "181",
                cure: "181",
                dead: "0",
              },
              {
                id: 53,
                province: "宁波市",
                sup: "157",
                cure: "157",
                dead: "0",
                
              },
              {
                id: 54,
                province: "台州市",
                sup: "147",
                cure: "147",
                dead: "0",
              },
              {
                id: 61,
                province: "信阳市",
                sup: "274",
                cure: "272",
                dead: "2",
                
              },
              {
                id: 62,
                province: "郑州市",
                sup: "157",
                cure: "152",
                dead: "5",
              },
              {
                id: 63,
                province: "南阳市",
                sup: "156",
                cure: "153",
                dead: "3",
                
              },
              {
                id: 64,
                province: "周口市",
                sup: "76",
                cure: "75",
                dead: "1",
              },
              {
                id: 65,
                province: "漯河市",
                sup: "36",
                cure: "36",
                dead: "0",
              }
        ]);
      }, 1000);
    },
    nowTag() {
      this.tag = 0;
    },
    allTag() {
      this.tag = 1;
    },
    change_page(val) {
      this.obj.page = val;
    },
    ...mapActions("dataList", ["page_query"]),
    ...mapActions("article", ["page_query_article"]),
    show_content(val) {
      this.dialogVisible = true;
      this.content = val;
    },
    findData() {
      this.page_query({
        page: 1,
        pageSize: 10,
      }).then(() => {
        let res1 = this.dataList.list.map((item) => {
          return item.province;
        });
        //生成一个死亡人数的数组
        let res2 = this.dataList.list.map((item) => {
          return item.suspected;
        });
        let res3 = this.dataList.list.map((item) => {
          return item.dead;
        });
        let res4 = this.dataList.list.map((item) => {
          return item.cure;
        });
        let res5 = this.dataList.list.map((item) => {
          return item.outside;
        });
        this.initEchart(res1, res2, res3, res4, res5);
      });
    },
    initEchart(val1, val2, val3, val4, val5) {
      echarts.init(document.getElementById("echarts")).dispose();
      //初始化图标
      var myChart = echarts.init(document.getElementById("echarts"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "疫情新增趋势",
          subtext: "单位:例",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false, // 不留白，从原点开始
          inverse: true,
          data: val1,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "新增确诊人数",
            data: val2,
            showSymbol: false,
            barWidth: 15,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            type: "line",
          },
          {
            data: val3,
            name: "新增死亡人数",
            showSymbol: false,
            barWidth: 15,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            type: "line",
          },
          {
            data: val4,
            name: "新增治愈人数",
            showSymbol: false,
            barWidth: 15,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            type: "line",
          },
          {
            data: val5,
            name: "新增境外输入人数",
            showSymbol: false,
            barWidth: 15,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            type: "line",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
.all {
  overflow: hidden;
  background-color: skyblue;
}
/* div{
 
} */
.left {
  width: 300px;
  height: 650px;
  float: left;
}
.tree-props {
  width: 70px;
  height: 40px;
}
#echarts {
  width: 300px;
  height: 200px;
  border: 1px solid #333;
  background-color: white;
}
.left div:nth-child(4) {
  width: 300px;
  height: 200px;
  border: 1px solid #333;
  position: relative;
  background-color: white;
  background-image: url('../../icons/svg/患者特征.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.mid {
  width: 669px;
  height: 650px;
  float: left;
  overflow: hidden;
}
.get {
  height: 30px;
  font-size: 20px;
  text-align: center;
  font-weight: 800;
  background-color: #184370;
  color: skyblue;
}
.title {
  width: 669px;
  height: 32px;
  border: 1px solid #333;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  background-color: #184370;;
  color: skyblue;
  position: relative;
}
.title_head {
  position: absolute;
  left: 50%;
  margin-left: -40px;
}
.content {
  width: 669px;
  height: 500px;
  overflow: hidden;
  position: relative;
  border: 1px solid #333;
}
.contain {
  position: absolute;
  margin-top: -100px;
  margin-left: 100px;
  width: 500px;
  height: 499px;
}
.logo {
  width: 300px; 
  height: 30px; 
  float: right;
  border: 1px solid #333;
}
.talk {
  width: 300px;
  height: 617px;
  border: 1px solid #333;
  overflow-x: hidden;
background-color: white;
}
.right {
  width: 300px;
  height: 650px;
  float: right;
  border: 1px solid #333;
}
.history{
  width: 669px;
  height: 100px;
  border: 1px solid #333;
}
.history_title {
  width: 669px;
  height: 30px;
  border: 1px solid #333;
  font-size: 20px;
  line-height: 30px;
  font-weight: 800;
  text-align: center;
  background-color: #184370;
  color: skyblue;
}
#history_echarts {
  width: 669px;
  height: 85px;
  background-color: white;
}
</style>